

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  Image,
  View,
  Modal,
  Switch,
} from 'react-native';
 

export default class CockpitModal extends Component {
    constructor(props) {  
        super(props);  
        this.state = {
          show:false, 
        };
    }  

    hiddenModal = () => {
        this.setState({
            show: false,
        });
    };

    showModal = () => {
        this.setState({
            show: true,
        });
    };


    // 显示/隐藏 modal  
    _setModalVisible() {  
        let isShow = this.state.show;  
        this.setState({  
            show:!isShow,  
        });
    }

    _confirm(){
        if(this.props.confirm){
            this.props.confirm();
        }
    }


    _cancel(){
        this._setModalVisible();
        if(this.props.cancel){
            this.props.cancel();
        }
    }
 
    render() {
    return (
        <View style={{paddingTop:20,paddingLeft:10,paddingRight:10}}>
          <Modal  
            animationType={this.props.animationType ? this.props.animationType : 'slide'}
            transparent={true}  
            visible={this.state.show}  
            onShow={() => {}}  
            onRequestClose={() => {}} >  
            <View style={styles.container}>  
              <View style={styles.subView}>  
                <Text style={styles.titleText}>  
                  {this.props.titleText ? this.props.titleText : '提示'}
                </Text>
                
                {
                    this.props.children ? <View style={styles.horizontalLine} /> : <View></View>
                }
                {this.props.children}

                <View style={styles.horizontalLine} />  
                <View style={styles.buttonView}>  
                  <TouchableOpacity underlayColor='transparent'  
                    style={styles.buttonStyle}  
                    onPress={this._cancel.bind(this)}>  
                    <Text style={styles.buttonText}>  
                      取消  
                    </Text>  
                  </TouchableOpacity>  
                  <View style={styles.verticalLine} />  
                  <TouchableOpacity underlayColor='transparent'  
                    style={styles.buttonStyle}  
                    onPress={this._confirm.bind(this)}>  
                    <Text style={styles.buttonText}>  
                      确定  
                    </Text>  
                  </TouchableOpacity>  
                </View>  
              </View>  
            </View>  
          </Modal>
        </View>
      )}
    }


const styles = StyleSheet.create({
  container: {  
    backgroundColor:'#00000099',
    
    alignItems: 'center',  
    justifyContent:'center',  
    flex:1,  
  },  
  // modal上子View的样式  
  subView:{
    marginLeft:30,  
    marginRight:30,  
    backgroundColor:'#ffffff',  
    alignSelf: 'stretch',  
    justifyContent:'center',  
    borderRadius: 10,  
    borderWidth: 1,  
    borderColor:'#ccc',
  },  
  // 标题  
  titleText:{  
    marginTop:10,  
    // marginBottom:5,     
    height:30,  
    fontSize:16,  
    fontWeight:'bold',  
    textAlign:'center',  
  },  
  // 水平的分割线  
  horizontalLine:{  
    // marginTop:5,  
    height: 1,  
    backgroundColor:'#ccc',  
  },  
  // 按钮  
  buttonView:{  
    flexDirection: 'row',  
    alignItems: 'center',  
  },  
  buttonStyle:{  
    flex:1,  
    height:40,  
    alignItems: 'center',  
    justifyContent:'center',  
  },  
  // 竖直的分割线  
  verticalLine:{  
    width: 1,  
    height:40,  
    backgroundColor:'#ccc',  
  },  
  buttonText:{  
    fontSize:16,  
    color:'#3393F2',  
    textAlign:'center',  
  }, 
});